import React, { Suspense } from "react";
import "./App.css";
import { useAuth } from "./context/authContext";
import { ErrorBoundary } from "./components/ErrorBoundary";
import { FullPageErrorFallback, FullPageLoading } from "./components/lib";
const AuthenicatedApp = React.lazy(
  () => import("authenicatedApp/authenicatedApp")
);
const UnauthenicatedApp = React.lazy(() => import("unauthenicatedApp"));

function App() {
  const { user } = useAuth();
  return (
    <div className="App">
      <ErrorBoundary fallbackRender={FullPageErrorFallback}>
        <Suspense fallback={<FullPageLoading />}>
          {user ? <AuthenicatedApp /> : <UnauthenicatedApp />}
        </Suspense>
      </ErrorBoundary>
    </div>
  );
}

export default App;
